<template>
   <div  class="customer" style="padding: 40px 20px 40px 0">
      <div style="width: 85%;">
		  <el-row>
		      <el-col :span="24">              
		              <el-button
		                  type="primary"
		                  @click="goBack()">返回
		               </el-button>
		              <span style="font-size: 15px;margin-left: 10px;">新增/编辑规格</span>
		      </el-col>
		  </el-row>
		  <hr>
		  <div style="margin-bottom: 30px;">
		     <span>规格：</span>
		     <el-input style="width: 200px;" v-model="standard"></el-input>
		  </div>
		  <div>
		     <span>属性：</span>
		     <el-tag
		      :key="item.spuName"
		      v-for="item in dynamicTags"
		      :closable="true"
		      :close-transition="false"
		      @close="handleClose(item)"
		      style="margin-left: 10px;"
		      >
		      {{item.spuName}}
		      </el-tag>
		      <el-input
		        class="input-new-tag"
		        v-if="inputVisible"
		        v-model="inputValue"
		        ref="saveTagInput"
		        size="mini"
		        @keyup.enter.native="handleInputConfirm"
		        @blur="handleInputConfirm"
		        :maxlength="16"
		      >
		      </el-input>
		      <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加属性</el-button>
		  </div>
		  <div style="margin-top: 40px;margin-left: 50px;">
		     <el-button style="width: 300px;" type="primary"  @click="submit()">保存</el-button>
		  </div>
	  </div>
        
   </div>
   
</template>
<script>
  export default {
    data() {
      return {
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        standard:''
      };
    },
    created(){
        this.storeId=JSON.parse(sessionStorage.getItem('permission')).storeId
        this.fetchData();
    },
    methods: {

            fetchData () {
                    if (this.$route.params.id=='add') {
                      return;
                    }
                      this.dataApi.ajax('selectShopSpu',{spuId:this.$route.params.id}, res => {
                          if (res.responseType === 'S') {
                               this.standard=res.shopSpuDto.spuName
                               var arr=[]
                               for (var i=0;i< res.shopSpuDto.shopSpuSecDtos.length; i++) {
                                 arr.push({
                                  spuName:res.shopSpuDto.shopSpuSecDtos[i].spuName,
                                  spuId:res.shopSpuDto.shopSpuSecDtos[i].spuId
                                 })
                               }
                              this.dynamicTags=arr
                          }
                      });

           },
            handleClose(item) {
              if (item.spuId) {
                  this.dataApi.ajax('editShopSpuDetail',{spuId:item.spuId}, res => {
                      if (res.responseType === 'S') {
                           for (var i = this.dynamicTags.length - 1; i >= 0; i--) {
                              if (item.spuId==this.dynamicTags[i].spuId) {
                                 this.dynamicTags.splice(i,1)
                                 break;
                              }
                            }
                      }

                  }); 
              }else{
                for (var i = this.dynamicTags.length - 1; i >= 0; i--) {
                  if (item.spuName==this.dynamicTags[i].spuName) {
                     this.dynamicTags.splice(i,1)
                     break;
                  }
                }
              }
              
              
            },

            showInput() {
              this.inputVisible = true;
              this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
              });
            },

            handleInputConfirm() {
              let inputValue = this.inputValue;
              inputValue=inputValue.trim()
              inputValue=inputValue.replace(/[, ]/g,'')
              if (inputValue) {
                if (!this.check(inputValue)) {
                  this.dynamicTags.push({spuName:inputValue});
                }else{
                  this.showMsg('属性不可以重复','warning')
                  return;
                }
                
              }
              this.inputVisible = false;
              this.inputValue = '';
            },
            submit(){
              if (!this.standard) {
                this.$message({
                    type: 'warning',
                    message: '请输入规格名称!'
                  });
                return;
              }
              if (this.dynamicTags.length==0) {
                 this.$message({
                    type: 'warning',
                    message: '请添加属性!'
                  });
                return;
              }
              if (this.$route.params.id=='add') {
                var arr=[]
                for (var i=0;i< this.dynamicTags.length; i++) {
                  arr.push(this.dynamicTags[i])
                }
               var data={
                  spuName:this.standard,
                  shopSpuSecDtos:arr
               }
               this.dataApi.ajax('addShopSpu',data, res => {
                          if (res.responseType === 'S') {
                               this.showMsg('新增成功')
                               this.goBack()
                          }
                      });
              }else{
                   var arr=[]
                    for (var i = 0;i<this.dynamicTags.length; i++) {
                      if (!this.dynamicTags[i].spuId) {
                         arr.push({spuName:this.dynamicTags[i].spuName})
                      }
                      
                    }
                   var data={
                      spuName:this.standard,
                      shopSpuSecDtos:arr,
                      spuId:this.$route.params.id
                   }
                   this.dataApi.ajax('editShopSpu',data, res => {
                              if (res.responseType === 'S') {
                                   this.showMsg('修改成功')
                                   this.goBack()
                              }
                          });
                 }
              },
              check(name){
                for (var i = this.dynamicTags.length - 1; i >= 0; i--) {
                  if (name==this.dynamicTags[i].spuName) {
                     return true
                     break;
                  }
                }
              }
    }
  }
</script>